<!DOCTYPE html>
<html lang="en">
<head>
	<title>three.js webgl - morphtargets - MD2 controls</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
	<style>
		body {
			color: #000;
			font-family:Monospace;
			font-size:13px;
			text-align:center;
			font-weight: bold;
			background-color: #fff;
			margin: 0px;
			overflow: hidden;
		}
		a { color: skyblue; }
	</style>
</head>

<body>


<script src="js/three.min.js"></script>

<script src="js/OrbitControls.js"></script>

<script src='js/loaders/MD2Loader.js'></script>
<script src='js/MD2CharacterComplex.js'></script>
<script src='js/Gyroscope.js'></script>
<script src="js/physi.js"></script>
<script src='js/Detector.js'></script>
<script src='js/stats.min.js'></script>
<script src="js/loaders/DDSLoader.js"></script>
<script src="js/loaders/MTLLoader.js"></script>
<script src="js/loaders/OBJLoader.js"></script>

<script>


//	'use strict';
//
//	Physijs.scripts.worker = 'js/physijs_worker.js';
//	Physijs.scripts.ammo = 'js/ammo.js';

	if ( ! Detector.webgl ) Detector.addGetWebGLMessage();

	var SCREEN_WIDTH = window.innerWidth;
	var SCREEN_HEIGHT = window.innerHeight;

	var container, camera, scene, renderer;
	var treeMtlLoad;
	var treeObjLoader;
	var characters = [];
	var nCharacters = 0;

	var cameraControls;

	var controls = {

		moveForward: false,
		moveBackward: false,
		moveLeft: false,
		moveRight:false,
//      new functions
//		add these three function thus can achieve additional functions
		jump:false,
		crouch:false,
		attack:false,
	};

	var clock = new THREE.Clock();

	init();
	animate();

	function init() {

		container = document.createElement( 'div' );
		document.body.appendChild( container );

		// CAMERA

		camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 4000 );
		camera.position.set( 0, 150, 1300 );

		// SCENE

		scene = new THREE.Scene();
		scene.fog = new THREE.Fog( 0xffffff, 1000, 4000 );

		scene.add( camera );

		// LIGHTS

		scene.add( new THREE.AmbientLight( 0x222222 ) );

		var light = new THREE.DirectionalLight( 0xffffff, 2.25 );
		light.position.set( 200, 450, 500 );

		light.castShadow = true;

		light.shadow.mapSize.width = 1024;
		light.shadow.mapSize.height = 512;

		light.shadow.camera.near = 100;
		light.shadow.camera.far = 1200;

		light.shadow.camera.left = -1000;
		light.shadow.camera.right = 1000;
		light.shadow.camera.top = 350;
		light.shadow.camera.bottom = -350;

		scene.add( light );
		// scene.add( new THREE.CameraHelper( light.shadow.camera ) );


		//  GROUND

		var gt = new THREE.TextureLoader().load( "images/backgrounddetailed6.jpg" );
		var gg = new THREE.PlaneBufferGeometry( 16000, 16000 );
		var gm = new THREE.MeshPhongMaterial( { color: 0xffffff, map: gt } );

		var ground = new THREE.Mesh( gg, gm );
		ground.rotation.x = - Math.PI / 2;
		ground.material.map.repeat.set( 64, 64 );
		ground.material.map.wrapS = THREE.RepeatWrapping;
		ground.material.map.wrapT = THREE.RepeatWrapping;
		// note that because the ground does not cast a shadow, .castShadow is left false
		ground.receiveShadow = true;

		scene.add( ground );

		// RENDERER

		renderer = new THREE.WebGLRenderer( { antialias: true } );
		renderer.setClearColor( scene.fog.color );
		renderer.setPixelRatio( window.devicePixelRatio );
		renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
		container.appendChild( renderer.domElement );

		//

		renderer.gammaInput = true;
		renderer.gammaOutput = true;

		renderer.shadowMap.enabled = true;
		renderer.shadowMap.type = THREE.PCFSoftShadowMap;

		// STATS

//		stats = new Stats();
//		container.appendChild( stats.dom );

		// EVENTS

		window.addEventListener( 'resize', onWindowResize, false );
		document.addEventListener( 'keydown', onKeyDown, false );
		document.addEventListener( 'keyup', onKeyUp, false );

		// CONTROLS

		cameraControls = new THREE.OrbitControls( camera, renderer.domElement );
		cameraControls.target.set( 0, 50, 0 );

		// CHARACTER

		var configOgro = {

			baseUrl: "others/md2/ogro/",

			body: "ogro.md2",
			skins: [ "grok.jpg", "ogrobase.png", "arboshak.png", "ctf_r.png", "ctf_b.png", "darkam.png", "freedom.png",
				"gib.png", "gordogh.png", "igdosh.png", "khorne.png", "nabogro.png",
				"sharokh.png" ],
			weapons:  [ [ "weapon.md2", "weapon.jpg" ] ],
			animations: {
				move: "run",
				idle: "stand",
				jump: "jump",
				attack: "attack",
				crouchMove: "cwalk",
				crouchIdle: "cstand",
				crouchAttach: "crattack"
			},

			walkSpeed: 400,
			crouchSpeed: 200,

		};
		var onProgress = function ( xhr ) {
			if ( xhr.lengthComputable ) {
				var percentComplete = xhr.loaded / xhr.total * 100;
				console.log( Math.round(percentComplete, 2) + '% downloaded' );
			}
		};

		var onError = function ( xhr ) { };

		THREE.Loader.Handlers.add( /\.dds$/i, new THREE.DDSLoader() );
		treeMtlLoad = new THREE.MTLLoader();
		treeMtlLoad.setPath('others/grass/');
		treeMtlLoad.load('Grass_01.mtl',function(materials){
			materials.preload();

			treeObjLoader = new THREE.OBJLoader();
			treeObjLoader.setMaterials(materials);
			treeObjLoader.setPath('others/grass/');
			treeObjLoader.load('Grass_01.obj',function(obj){
				obj.position.z = 0;
				obj.position.x = 0;
				obg.position.y = 0;
				scene.add(obj);
			},onProgress,onError);
		},onProgress,onError);

		var nRows = 1;
		//var nSkins = configOgro.skins.length;
		var nSkins = 1;

		nCharacters = nSkins * nRows;
		//nCharacters = 1;

		for ( var i = 0; i < nCharacters; i ++ ) {

			var character = new THREE.MD2CharacterComplex();
			character.scale = 3;
			character.controls = controls;
			characters.push( character );

		}


		var cubes = [];
 		var cm = [];
		var geometry = new THREE.CubeGeometry(100,10000,100);
		var material = new THREE.MeshBasicMaterial({color:0xFFC46B});
//		for (var i=0;i<2000;i++){
//			cube[i] = new THREE.Mesh(geometry,material);
//			//cube[i].position.set((100+i)*2,22,3+i*10+1300);
//			cube[i].position.x = (100+i)*2;
//			cube[i].position.z = 0;
//			cube
//			scene.add(cube[i]);
//		}
		var cube1 = new THREE.Mesh(geometry,material);
		cube1.position.x = 0;
		cube1.position.y = 0;
		cube1.position.z = 0;
		//scene.add(cube1);
		for (var i=0;i<200;i++){
			cubes[i] = new THREE.Mesh(geometry,material);
			cubes[i].position.set(30*(Math.random()*100+23),29,30*(Math.random()*300+20));
			scene.add(cubes[i]);
		}

		var material_1 = new THREE.MeshBasicMaterial({color:0x34D98C});
		for (var i=0;i<200;i++){
			cm[i] = new THREE.Mesh(geometry,material_1);
			cm[i].position.set((-1)*30*(Math.random()*100+50),(29),(-1)*30*(Math.random()*300+200));
			scene.add(cm[i]);
		}
//		for (var  i=1;i<12;i++){
//			cube.position.set((1+i)*2,22+i,3);
//			scene.add(cube);
//		}

		var baseCharacter = new THREE.MD2CharacterComplex();
		baseCharacter.scale = 3;

		baseCharacter.onLoadComplete = function () {

			var k = 0;

			for ( var j = 0; j < nRows; j ++ ) {

				for ( var i = 0; i < nSkins; i ++ ) {

					var cloneCharacter = characters[ k ];

					cloneCharacter.shareParts( baseCharacter );

					// cast and receive shadows
					cloneCharacter.enableShadows( true );

					cloneCharacter.setWeapon( 0 );
					cloneCharacter.setSkin( i );

					cloneCharacter.root.position.x = ( i - nSkins/2 ) * 150;
					cloneCharacter.root.position.z = j * 250;

					scene.add( cloneCharacter.root );

					k ++;

				}

			}

			var gyro = new THREE.Gyroscope();
			gyro.add( camera );
			gyro.add( light, light.target );

			characters[ Math.floor( nSkins / 2 ) ].root.add( gyro );

		};

		baseCharacter.loadParts( configOgro );

	}







	// EVENT HANDLERS

	function onWindowResize( event ) {

		SCREEN_WIDTH = window.innerWidth;
		SCREEN_HEIGHT = window.innerHeight;

		renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );

		camera.aspect = SCREEN_WIDTH/ SCREEN_HEIGHT;
		camera.updateProjectionMatrix();

	}



//	litter letter

	function onKeyDown ( event ) {

		event.stopPropagation();

		switch( event.keyCode ) {

			case 38: /*up*/
			case 87: /*W*/ 	controls.moveForward = true; break;

			case 40: /*down*/
			case 83: /*S*/ 	 controls.moveBackward = true; break;

			case 37: /*left*/
			case 65: /*A*/   controls.moveLeft = true; break;

			case 39: /*right*/
			case 68: /*D*/    controls.moveRight = true; break;


//			these functions are unprefect


			case 67: /*C*/     controls.crouch = true; break;
			case 32: /*space*/ controls.jump = true; break;
			case 17: /*ctrl*/  controls.attack = true; break;

		}

	}

//	big letter

	function onKeyUp ( event ) {

		event.stopPropagation();




//		these function  are no complete

		switch( event.keyCode ) {

			case 38: /*up*/
			case 87: /*W*/ controls.moveForward = false; break;

			case 40: /*down*/
			case 83: /*S*/ 	 controls.moveBackward = false; break;

			case 37: /*left*/
			case 65: /*A*/ 	 controls.moveLeft = false; break;

			case 39: /*right*/
			case 68: /*D*/ 	  controls.moveRight = false; break;

		case 67: /*C*/     controls.crouch = false; break;
		case 32: /*space*/ controls.jump = false; break;
		case 17: /*ctrl*/  controls.attack = false; break;

		}

	}

	//

	function animate() {

		requestAnimationFrame( animate );
		render();

		//stats.update();

	}

	function render() {

		var delta = clock.getDelta();

		cameraControls.update( delta );

		for ( var i = 0; i < nCharacters; i ++ ) {

			characters[ i ].update( delta );

		}

		renderer.render( scene, camera );

	}

</script>

</body>
</html>
